import React from 'react';

import gradient from '@/assets/images/profile/GradientBack.png';
import gradientMobile from '@/assets/images/profile/GradientBackMobile.png';
import { BackButton } from '@/features/BackButton';
import { innerUrls } from '@/shared/constants';
import { ModalContext } from '@/shared/context/ModalContext';
import { Modals } from '@/shared/interfaces';
import { Button, ButtonVariants, Title } from '@/shared/ui';
import { ModalPage } from '@/widgets/ModalPage';
import Image from 'next/image';
import { useWindowSize } from 'usehooks-ts';

import { PremiumBox } from '../PremiumBox';
import { TarfixBox } from '../TarfixBox';
import cs from './Subscription.module.scss';

export const Subscription = () => {
  const { closeModal, openModal, setData, id } = React.useContext(ModalContext);
  const { width } = useWindowSize();
  const [active, setActive] = React.useState<'year' | 'month'>('year');

  const openModalWithHistory = () => {
    openModal(Modals.AdvantagesModal);
    setData(() => ({ id }));
  };

  return (
    <ModalPage
      className={cs.modal}
      containerClassName={cs.modal_container}
      crossWithShadow
      handleClose={() => closeModal()}
      isOpen
      noPadding
      zIndex={20}
    >
      <div className={cs.general_container}>
        <div className={cs.card_image}>
          <Image
            alt="preview"
            fill
            placeholder="blur"
            priority
            quality={100}
            sizes="(max-width: 768px) 100vw, (max-width: 1024px) 100vw, (max-width: 1366px) 35vw, 45vw"
            src={width > 1024 ? gradient : gradientMobile}
          />
        </div>
        <div className={cs.container}>
          {width < 1024 && <BackButton className={cs.back} onClick={() => closeModal()} />}
          <Title className={cs.title} size="modal-size">
            Премиум
          </Title>
          <Title className={cs.funcs} size="xs">
            Эксклюзивные функции приложения, <br></br>возможность поддержать companyName
          </Title>
          <TarfixBox active={active} setActive={setActive} />
          <PremiumBox onClick={() => openModalWithHistory()} />
          <div className={cs.buy_block}>
            <Button className={cs.btn} variant={ButtonVariants.Green}>
              Купить за 399 ₽/год
            </Button>
            <p className={cs.agree}>
              Соглашаюсь{' '}
              <Button href={innerUrls.agreement} link target="_blank" variant={ButtonVariants.Link}>
                с политикой персональных данных
              </Button>
            </p>
          </div>
        </div>
      </div>
    </ModalPage>
  );
};
